<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>列表样式</title>

        <style type="text/css">
            .container { border: 1px solid blue ; margin: 25px ; }
            .odd { background: #dedede ;  }
            .even { background: #ffff00 ;  }

            .first ul { border: 1px solid red ; }
            

            .second ul { 
                border: 1px solid red ; 
                /* 设置 列表项目( list item ) 标记 的位置 ( inside | outside ) */
                list-style-position: inside ; 
            }

            .third ul { 
                border: 1px solid red ; 
                /* 设置 列表项目( list item ) 标记 的 位置 ( inside | outside ) */
                list-style-position: inside ; 
                /* 设置 列表项目( list item ) 标记 的 类型 */
                list-style-type: square ;
            }

            .fourth ul {
                border: 1px solid red ; 
                list-style-position: inside ; 
                list-style-image: url(mi.ico);
                list-style-type: square ;
            }

            .fifth ul {
                border: 1px solid red ; 
                list-style: square inside url(mi.ico);
            }

        </style>

    </head>
    <body>

        <div class="container first">
            <ul>
                <li class="odd">ul或ol元素的上下两边默认是有外边距的</li>
                <li class="even">贾宝玉</li>
                <li class="odd">诸葛亮</li>
                <li class="even">狄仁杰</li>
            </ul>
        </div>

        <div class="container second">
            <ul>
                <li class="odd">宋江</li>
                <li class="even">贾宝玉</li>
                <li class="odd">诸葛亮</li>
                <li class="even">狄仁杰</li>
            </ul>
        </div>

        <div class="container third">
            <ul>
                <li class="odd">宋江</li>
                <li class="even">贾宝玉</li>
                <li class="odd">诸葛亮</li>
                <li class="even">狄仁杰</li>
            </ul>
        </div>

        <div class="container fourth">
            <ul>
                <li class="odd">宋江</li>
                <li class="even">贾宝玉</li>
                <li class="odd">诸葛亮</li>
                <li class="even">狄仁杰</li>
            </ul>
        </div>

        <div class="container fifth">
            <ul>
                <li class="odd">我的中国芯</li>
                <li class="even">我的上高</li>
                <li class="odd">长沙保卫战</li>
                <li class="even">高山下的花环</li>
                <li class="odd">南京南京</li>
            </ul>
        </div>
        
    </body>
</html>